<template>
  <view class="heart_rate">
    <scroll-view scroll-y class="scroll_view">
      <view>
        <view class="swiper-content">
          <!-- 健康评分 -->
          <view class="score-box">
            <view class="score-title">
              活动评分
              <uni-icons
                type="info"
                class="info-icon"
                size="20"
                color="#666666"
              ></uni-icons>
            </view>
            <view class="score-value">{{ score }}</view>
            <view class="score-desc">
              <view class="score-desc-item">
                <view class="score-line line-left"></view>
                <view class="score-block"></view>
              </view>
              <view class="score-desc-text">超过了74%的用户</view>
              <view class="score-desc-item">
                <view class="score-block"></view>
                <view class="score-line line-right"></view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 健康建议 -->
      <view class="advice-box">
        <view class="advice-title">智慧健康建议</view>
        <view class="advice-content">
          提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
        </view>
        <view class="ai-btn">
          <AiPointReport></AiPointReport>
        </view>
      </view>

      <view
        style="
          margin-top: 15px;
          margin-bottom: 15px;
          font-size: 16px;
          color: #666666;
        "
        ><text>体征数据</text
        ><text style="float: right">{{ chooseDate }}</text></view
      >

      <!-- 心率 -->
      <view class="card heartRate" :class="{ noDay: selectType !== 'day' }">
        <view class="head">
          <!--				<image class="w-92rpx" src="@/static/ring/chart/heart.png" mode="widthFix"></image>-->

          <view class="title">
            <view class="title-text">
              <view class="title-content"> 心率 </view>
              <TagState></TagState>
            </view>
            <uni-icons
              type="info"
              class="info-icon"
              size="20"
              color="#666666"
            ></uni-icons>
          </view>
          <!--				<uni-icons type="info-filled" class="ml-10rpx" size="20" color="#666666" @click="openTip('heart')"></uni-icons>-->
        </view>
        <view class="value">
          <text style="font-size: 30px">{{ heart.min }}-{{ heart.max }}</text>
          <text style="font-size: 14px; color: #999999">次/分钟</text>
          <br />
          <text style="font-size: 14px; color: #999999"
            >推荐值：{{
              heart.allData.heartbeatModel
                ? heart.allData.heartbeatModel.config.min
                : 0
            }}-{{
              heart.allData.heartbeatModel
                ? heart.allData.heartbeatModel.config.max
                : 0
            }}次/分钟</text
          >
        </view>
        <view class="chart">
          <!-- <view v-if="heartNotDataOrLoading" class="noData_loading_mask">
            {{ !heart.loading ? "暂无数据" : "加载中..." }}
          </view> -->
          <l-echart ref="heartChartRef"></l-echart>
        </view>
        <view
          style="
            height: 40px;
            background-color: #e6e6ef;
            color: #ff8587;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            border-radius: 10px;
          "
        >
          <text>最新：11:00</text><text>93 次/分</text>
          <!-- <text>最新：{{ heartRateTime }}</text
          ><text>{{ heartRate }} 次/分</text> -->
        </view>
        <!--			<view v-if="selectType === 'day' && heart.averageNum" class="range">

				<view class="des">
					<view class="desTop">
						<view class="dot"></view>
						<view class="titleTime text-#AFAFAF"> 范围 </view>
					</view>
					<view class="value">{{ heart.min }} - {{ heart.max }} <text class="unit">/min</text></view>
				</view>
				<view class="des">
					<view class="desTop">
						<view class="dot"></view>
						<view class="titleTime text-#AFAFAF">静息心率</view>
					</view>
					<view class="value">{{ heart.min }} <text class="unit">/min</text></view>
				</view>
			</view>-->
      </view>
      <view class="half-card-parent">
        <view class="half-card">
          <view class="head">
            <view class="title">HRV</view>
            <uni-icons type="info" class="info-icon" size="20"></uni-icons>
          </view>
          <view>
            <view class="value"
              ><text style="font-size: 30px">{{ hrv.averageNum }}</text
              ><text style="color: #999999; margin-right: 10px">ms</text>
              <TagState></TagState>
            </view>
            <view class="value"
              ><text style="font-size: 12px; color: #999999"
                >推荐值：{{ hrv.allData.hrvModel.config.min }}-{{
                  hrv.allData.hrvModel.config.max
                }}ms</text
              ></view
            >
          </view>
        </view>
        <view class="half-card">
          <view class="head">
            <view class="title">静息心率</view>
            <uni-icons type="info" class="info-icon" size="20"></uni-icons>
          </view>
          <view>
            <view class="value"
              ><text style="font-size: 30px">{{ heart.min }}</text
              ><text style="color: #999999; margin-right: 10px">次/分钟</text>
              <TagState></TagState>
            </view>
            <view class="value"
              ><text style="font-size: 12px; color: #999999"
                >推荐值：45-55次/分</text
              ></view
            >
          </view>
        </view>
      </view>

      <view
        style="
          margin-top: 15px;
          margin-bottom: 15px;
          font-size: 16px;
          color: #666666;
        "
        ><text>呼吸</text
        ><text style="float: right">{{ chooseDate }}</text></view
      >

      <!-- hrv -->

      <Blood :selectDateInfo="selectDateInfo" />
    </scroll-view>
  </view>
</template>
<script>
import dayjs from "dayjs";
import * as echarts from "echarts";
import { getHeatBeatData } from "@/api/ring/report.js";
import AiPointReport from "@/pages/ring/components/AiPointReport.vue";
import Blood from "./blood.vue";
import TagState from "@/components/tag-state/index.vue";

import {
  queryMyHeartInfoByDay,
  queryMyHeartInfoByMonth,
  queryMyHeartInfoByWeek,
  queryMyHrvInfoByDay,
  queryMyHrvInfoByWeek,
  queryMyHrvInfoByMonth,
} from "@/api/ring/chart.js";

const tip_zh = `
心率是指每分钟心脏跳动的次数（bpm），静息状态下多数成人在60-100次/分钟之间。

规律运动可提升心脏效率，降低静息心率。运动时心率加快以供血肌肉，运动结束后心率逐渐恢复。

情绪波动如焦虑、紧张或兴奋也会影响心率，放松状态下（如睡前和睡觉期间）心率减慢。

注：本设备提供的检测数据仅用于日常健康管理辅助参考，不可替代专业医疗诊断。
`;

const tip_zh2 = `
HRV是评估心脏健康和自主神经系统（包括交感神经系统和副交感神经系统）功能的重要指标。

HRV通过分析心跳间隔的变化来评估心脏健康和自主神经系统功能。

较高的HRV通常表示更好的心脏健康和较强的应激适应能力。

注：本设备提供的检测数据仅用于日常健康管理辅助参考，不可替代专业医疗诊断。
`;

const _options = {
  // 浅蓝渐变背景（通过grid实现）
  grid: {
    top: 40,
    right: 30,
    bottom: 30,
    left: 20,
    backgroundColor: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: "rgba(200, 220, 255, 0.8)" }, // 顶部浅蓝
        { offset: 1, color: "rgba(230, 240, 255, 0.3)" }, // 底部更浅
      ],
    },
  },
  // 横轴（时间轴）
  xAxis: {
    type: "category",
    data: ["0:00", "1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", '8:00', '9:00', '10:00', '11:00'],
    axisLine: { lineStyle: { color: "#999" } },
    axisTick: {
      show: false,
    },
  },
  // 纵轴（数值轴）
  yAxis: {
    type: "value",
    min: 0,
    interval: 100,
    max: 200,
    position: 'right',
    axisLabel: {
      formatter: "{value}",
      color: "#666",
    },
    splitLine: { lineStyle: { color: "rgba(150, 150, 150, 0.1)" } }, // 浅色分割线
  },
  // 折线数据系列
  series: [],
};

export default {
  props: {
    selectDateInfo: Object,
  },
  components: {
    AiPointReport,
    Blood,
    TagState,
  },
  data() {
    return {
      score: 79,
      chooseDate: "",
      heartRate: 0,
      heartRateTime: "",
      selectType: "day",
      heart: {
        showTip: false,
        tipText: tip_zh,
        max: 0,
        min: 0,
        averageNum: 0,
        chartData: [],
        chartRef: null,
        chart: null,
        healthText: "",
        healthModelValue: 0,
        loading: false,
        empty: false,
        allData: {
          heartbeatModel: {
            config: {
              min: 0,
              max: 0,
            },
          },
        },
      },
      hrv: {
        showTip2: false,
        tipText2: tip_zh2,
        max: 0,
        min: 0,
        averageNum: 0,
        chartData: [],
        chartRef: null,
        chart: null,
        healthText: "",
        healthModelValue: 0,
        loading: false,
        empty: false,
        allData: {
          hrvModel: {
            config: {
              min: 0,
              max: 0,
            },
          },
        },
      },
    };
  },

  computed: {
    heartNotDataOrLoading() {
      const data = this.heart.chartData;
      return !data || !Array.isArray(data) || !data.length;
    },
    hrvNotDataOrLoading() {
      const data = this.hrv.chartData;
      return !data || !Array.isArray(data) || !data.length;
    },
    optionsHeartDay() {
      return {
        ..._options,
        series: [
          {
            name: "Line 1",
            type: "line",
            smooth: false,
            lineStyle: {
              width: 2,
              color: "#CCCCCC",
            },
            showSymbol: true,
            symbolSize: 1.5,
            symbol: "circle",
            itemStyle: {
              color: "#CCCCCC",
            },
            data: this.heart.chartData,
          },
        ],
      };
    },
    optionsHeartOther() {
      return {
        ..._options,
        series: [
          {
            name: "Line 1",
            type: "line",
            smooth: false,
            lineStyle: {
              width: 1.5,
              color: "#E5404F",
            },
            areaStyle: {
              opacity: 0,
            },
            showSymbol: true,
            symbol: "circle",
            data: this.heart.chartData,
          },
        ],
      };
    },
    optionsHrvDay() {
      return {
        ..._options,
        yAxis: [
          {
            type: "value",
            min: 0,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgba(141, 141, 141, 0.3)",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            smooth: false,
            lineStyle: {
              width: 1.5,
              color: "#E5404F",
            },
            showSymbol: false,
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#BF3541",
                },
                {
                  offset: 1,
                  color: "rgba(191, 53, 65, 0)",
                },
              ]),
            },
            data: this.hrv.chartData,
          },
        ],
      };
    },
    optionsHrvOther() {
      return {
        ..._options,
        yAxis: [
          {
            type: "value",
            min: 0,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgba(141, 141, 141, 0.3)",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "rgba(141, 141, 141, 0.3)",
              },
            },
          },
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            smooth: false,
            lineStyle: {
              width: 1.5,
              color: "rgba(0,0,0,.5)",
            },
            areaStyle: {
              opacity: 0,
            },
            showSymbol: true,
            symbol: "circle",
            data: this.hrv.chartData,
          },
        ],
      };
    },
  },

  watch: {
    selectDateInfo: {
      handler(nv) {
        const param = {
          type: "day",
          startTime: nv.fulldate,
        };
        this.heartRateOnChange(param);
        this.hrvOnChange(param);
        this.chooseDate = dayjs(nv.fulldate).format("MM月DD日");
        this.updateHeatData(nv.fulldate);
      },
      deep: true,
    },

    optionsHeartDay: {
      handler(nv) {
        if (this.selectType === "day") {
          if (this.heart.chart) {
            this.heart.chart.setOption(nv);
          }
        }
      },
      deep: true,
    },
    optionsHeartOther: {
      handler(nv) {
        if (this.selectType !== "day") {
          if (this.heart.chart) {
            this.heart.chart.setOption(nv);
          }
        }
      },
      deep: true,
    },
    optionsHrvDay: {
      handler(nv) {
        if (this.selectType === "day") {
          if (this.hrv.chart) {
            this.hrv.chart.setOption(nv);
          }
        }
      },
      deep: true,
    },
    optionsHrvOther: {
      handler(nv) {
        if (this.selectType !== "day") {
          if (this.hrv.chart) {
            this.hrv.chart.setOption(nv);
          }
        }
      },
      deep: true,
    },
  },
  async mounted() {
    if (!this.heart.chartRef) {
      this.heart.chartRef = this.$refs.heartChartRef;
    }
    if (!this.hrv.chartRef) {
      this.hrv.chartRef = this.$refs.hrvChartRef;
    }
    if (this.heart.chartRef) {
      this.heart.chart = await this.heart.chartRef.init(echarts);
    }
    if (this.hrv.chartRef) {
      this.hrv.chart = await this.hrv.chartRef.init(echarts);
    }
    let currentDate = dayjs().format("YYYY-MM-DD");
    if (this.selectDateInfo.fulldate) {
      currentDate = this.selectDateInfo.fulldate;
    }
    this.chooseDate = dayjs(currentDate).format("MM月DD日");
    const param = {
      type: "day",
      startTime: currentDate,
    };
    await this.heartRateOnChange(param);
    await this.hrvOnChange(param);
    await this.updateHeatData(currentDate);
  },

  methods: {
    async updateHeatData(date) {
      let dateFormat = dayjs(date).format("YYYYMMDD");
      getHeatBeatData({
        dateFormat: dateFormat,
        offsetMinutes: new Date().getTimezoneOffset(),
      })
        .then((res) => {
          console.log("heart beat data res", res.data);
          if (res.data) {
            this.heartRate = res.data.value;
            this.heartRateTime = dayjs(res.data.dateTimeFormat).format("HH:mm");
          } else {
            this.heartRate = "";
            this.heartRateTime = "";
          }
        })
        .catch((error) => console.log(error));
    },
    async heartRateOnChange(data) {
      this.heart.chart.setOption({
        ..._options,
        series: [
          {
            type: "line",
            data: [95, 102, 88, 110, 98, 105, 120, 164,121,97,95, 102, 88, 110], // 示例数据（峰值164在7:00）
            symbol: "none", // 默认不显示数据点
            lineStyle: {
              color: "#cccccc", // 主折线颜色
              width: 2,
            },
            // 标记峰值点（红色圆点）
            markPoint: {
              symbol: "circle",
              symbolSize: 8,
              itemStyle: { color: "#ff4d4f" }, // 红色
              label: { show: true },
              data: [
                {
                  name: "峰值",
                  coord: ["7:00", 164], // 对应峰值位置
                },
              ],
            },
          },
        ],
      });
      return;
      console.log("heartRateOnChange", data);

      const { type, startTime, endTime } = data;
      this.heart.max = 0;
      this.heart.min = 0;
      this.heart.averageNum = 0;
      this.heart.healthText = "";
      this.heart.healthModelValue = 0;
      this.heart.chartData = [];
      this.heart.loading = true;
      this.resetData(1);

      const offsetMinutes = new Date().getTimezoneOffset();

      const params =
        type == "day"
          ? { dateStr: startTime, offsetMinutes }
          : type === "week"
          ? { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes }
          : { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes };
      console.log("params", params);

      const requestMethod =
        type == "day"
          ? queryMyHeartInfoByDay
          : type == "week"
          ? queryMyHeartInfoByWeek
          : queryMyHeartInfoByMonth;

      try {
        const { data } = await requestMethod(params);
        this.heart.loading = false;
        if (this.heart.chart) {
          this.heart.chart.clear();
        }
        if (!data) {
          this.resetData(1);
          return;
        }
        console.log("heart data", data);
        this.heart.max = parseInt(data.max || 0);
        this.heart.min = parseInt(data.min || 0);
        this.heart.averageNum = parseInt(data.average || 0);
        this.heart.healthText = data?.heartbeatModel?.config?.modelZh;
        this.heart.healthModelValue = parseInt(
          data?.heartbeatModel?.value || 0
        );
        this.heart.allData = data;
        if (!data.rates) return;
        const dealWith =
          type == "day" ? this.heartGetFullByDay : this.heartGetFullByOther;
        dealWith(data.rates || []);
      } catch (error) {
        this.heart.loading = false;
        console.log("heartRateOnChange error", error);
        this.resetData(1);
      }
    },
    async hrvOnChange(data) {
      const { type, startTime, endTime } = data;
      this.hrv.max = 0;
      this.hrv.min = 0;
      this.hrv.averageNum = 0;
      this.hrv.healthText = "";
      this.hrv.healthModelValue = 0;
      this.hrv.chartData = [];
      this.hrv.loading = true;
      this.resetData(2);

      const offsetMinutes = new Date().getTimezoneOffset();
      //  "2024-12-25"  "2024-12-31"
      const params =
        type == "day"
          ? { dateStr: startTime, offsetMinutes }
          : type === "week"
          ? { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes }
          : { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes };
      console.log("params", params);

      const requestMethod =
        type == "day"
          ? queryMyHrvInfoByDay
          : type == "week"
          ? queryMyHrvInfoByWeek
          : queryMyHrvInfoByMonth;

      try {
        const { data } = await requestMethod(params);

        console.log("hrv", data);

        this.hrv.loading = false;
        if (this.hrv.chart) {
          this.hrv.chart.clear();
        }
        if (!data) {
          this.resetData(2);
          return;
        }
        this.hrv.allData = data;
        this.hrv.max = parseInt(data.max || 0);
        this.hrv.min = parseInt(data.min || 0);
        this.hrv.averageNum = parseInt(data.average || 0);
        this.hrv.healthText = data?.hrvModel?.config?.modelZh;
        if (!data.rates) return;

        const dealWith =
          type == "day" ? this.hrvGetFullByDay : this.hrvGetFullByOther;
        dealWith(data.rates || []);
      } catch (error) {
        console.log("heartRateOnChange error", error);
        this.resetData(2);
      }
    },

    async resetData(type) {
      if (type == 1) {
        this.heart.chartData = [];
        this.heart.averageNum = 0;
      } else {
        this.hrv.chartData = [];
        this.hrv.averageNum = 0;
      }
    },

    heartGetFullByDay(data) {
      let res = [];
      console.log("data => heart.chartData", data);
      for (let i = 0; i < 24; i++) {
        const has = data.findIndex((item) => Number(item.time) === i);
        if (has != -1) {
          res.push([i.toString() + ":00", data[i].value || null]);
        } else {
          res.push([i.toString() + ":00", null]);
        }
      }
      res.sort((a, b) => Number(a[0]) - Number(b[0]));

      this.heart.chartData = res;
    },

    hrvGetFullByDay(data) {
      let res = [];
      for (let i = 0; i < 24; i++) {
        const has = data.findIndex((item) => Number(item.time) === i);
        if (has != -1) {
          res.push([i.toString() + ":00", data[i].value || null]);
        } else {
          res.push([i.toString() + ":00", null]);
        }
      }
      res.sort((a, b) => Number(a[0]) - Number(b[0]));

      this.hrv.chartData = res;
    },

    hrvGetFullByOther(data) {
      const cycleCount =
        this.selectType == "week" ? 7 : Math.ceil(dayjs().daysInMonth());
      let res = [];
      for (let i = 0; i < cycleCount; i++) {
        {
          res.push([
            dayjs(data[i].date).format("MM.DD"),
            data[i].value || null,
          ]);
        }
      }
      this.hrv.chartData = res;

      console.log("hrv chart Data", this.hrv.chartData);
    },

    heartGetFullByOther(data) {
      const cycleCount =
        this.selectType == "week" ? 7 : Math.ceil(dayjs().daysInMonth());
      let res = [];
      for (let i = 0; i < cycleCount; i++) {
        {
          res.push([
            dayjs(data[i].date).format("MM.DD"),
            data[i].value || null,
          ]);
        }
      }
      this.heart.chartData = res;

      console.log("heart chart Data", this.heart.chartData);
    },

    openTip(type) {
      // const tips = {
      // 	tip: tip_zh,
      // 	icon: hImage,
      // 	title: "心率",
      // };
      let title = "";
      switch (type) {
        case "heart":
          // tips.tip = tip_zh;
          // tips.icon = hImage;
          // tips.title = "心率";
          title = "heart";
          break;
        case "hrv":
          // tips.tip = tip_zh2;
          // tips.icon = hImage;
          // tips.title = "心率变异性";
          title = "hrv";

          break;

        default:
          // tips.tip = tip_zh;
          // tips.icon = hImage;
          // tips.title = "心率";
          break;
      }

      this.$emit("tips", title);
    },
  },
};
</script>
<style lang="scss" scoped>
.heart_rate {
  width: 100%;
  height: 100%;

  .scroll_view {
    width: 100%;
    // height: calc(100vh - var(--status-bar-height) - 56rpx);
    height: calc(100% - 0rpx);
  }

  .w-92rpx {
    width: 92rpx;
  }

  .w-60rpx {
    width: 60rpx;
  }

  .w-70rpx {
    width: 70rpx;
  }

  .w-40rpx {
    width: 40rpx;
  }

  .w-30rpx {
    width: 30rpx;
  }

  .mr-8rpx {
    margin-right: 8rpx;
  }

  .text-#AFAFAF {
    color: #afafaf;
  }

  .card {
    width: 100%;

    background-color: rgba($color: white, $alpha: 0.5);
    backdrop-filter: blur(20rpx);
    border-radius: 8px;
    height: 740rpx;

    padding: 40rpx;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .head {
      width: 100%;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .title {
        width: 100%;
        font-size: 32rpx;
        font-weight: 500;
        text-align: left;
        //margin-left: 6cap;
        margin-right: 12rpx;
        display: flex;
        justify-content: space-between;
      }

      .value {
        margin-left: auto;
        font-weight: 500;
        font-size: 64rpx;

        text {
          font-size: 24rpx;
        }
      }
    }

    .chart {
      width: 100%;
      height: 400rpx;
      position: relative;

      .noData_loading_mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #e3f1fb;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: 150px;
        font-size: 28rpx;
        color: rgba(45, 153, 255, 1);
      }
      // background-color: #e5404f;
    }

    .range {
      display: flex;
      padding: 20rpx 52rpx 0 40rpx;
      font-weight: 500;

      .des {
        flex: 1;
        color: black;
        font-size: 32rpx;

        .desTop {
          display: flex;
          align-items: center;
          margin-bottom: 4rpx;
          white-space: nowrap;

          .titleTime {
            font-size: 28rpx;
            color: black;
            margin-left: 20rpx;
          }

          .dot {
            background: #e5404f;
            border-radius: 50%;
            width: 10rpx;
            height: 10rpx;
          }
        }

        .value {
          padding-left: 30rpx;

          .unit {
            font-size: 24rpx;
            margin-left: 8rpx;
          }
        }
      }
    }

    & + .card {
      margin-top: 40rpx;
      height: 730rpx;
    }

    &.noDay.heartRate {
      height: 640rpx;
    }

    &.noDay.hrv {
      height: 630rpx;
    }
  }

  .info {
    color: black;
    padding: 40rpx;

    .info-title {
      height: 60rpx;
      display: flex;
      align-items: center;
      font-family: PingFang HK;
      font-size: 36rpx;
      font-weight: 600;
      line-height: 50px;
      text-align: left;
      padding: 40rpx 0;

      .value {
        margin-left: auto;
      }
    }

    .info-content {
      font-family: PingFang SC;
      font-size: 28rpx;
      font-weight: 300;
      line-height: 40rpx;
      text-align: left;
    }
  }
}
.score-box {
  margin-top: 38rpx;
  text-align: center;

  .score-title {
    font-size: 32rpx;
    color: #999;
    margin-bottom: 8rpx;
  }

  .score-value {
    font-size: 128rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 42rpx;
  }

  .score-desc {
    font-size: 28rpx;
    color: #666;
  }
}

.advice-box {
  .advice-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #5667f8;
    margin-bottom: 16rpx;
  }

  .advice-content {
    font-size: 24rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 24rpx;
  }

  .ai-btn {
    display: flex;
    align-items: center;
    gap: 8rpx;
    font-size: 24rpx;
    color: #2d99ff;
  }
}
.half-card-parent {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.half-card {
  width: 48%;
  margin-top: 40rpx;
  background-color: rgba($color: white, $alpha: 0.5);
  backdrop-filter: blur(20rpx);
  border-radius: 8px;
  height: 250rpx;

  padding: 40rpx;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .head {
    width: 100%;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      text-align: left;
      //margin-left: 6cap;
      margin-right: 12rpx;
    }
  }
}

.score-desc {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  .score-desc-item {
    display: flex;
    align-items: center;
    .score-block {
      width: 5px;
      height: 5px;
      background: rgba(153, 153, 153, 1);
      border-radius: 1px;
    }
    .score-line {
      width: 60px;
      height: 2px;
    }
    .line-left {
      background: linear-gradient(
        90deg,
        rgba(153, 153, 153, 0) 0%,
        rgba(153, 153, 153, 1) 100%
      );
    }
    .line-right {
      background: linear-gradient(
        90deg,
        rgba(153, 153, 153, 1) 0%,
        rgba(153, 153, 153, 0) 100%
      );
    }
  }
  .score-desc-text {
    margin: 0 10px;
  }
}

.info-icon {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.2) !important;
}
.title-text {
  display: flex;
  align-items: center;
  .title-content {
    margin-right: 8px;
  }
}
div {
  color: #7cb5ff
}
</style>
